<template>
  <el-image
    :src="src"
    :fit="fit"
    :lazy="lazy"
    :preview-src-list="previewSrcList"
    :z-index="zIndex"
    :style="[wrapStyle]"
    @click="onClick"
  >
    <el-row type="flex" align="middle" justify="center" slot="error" class="image-slot">
      <img src="@/assets/images/public/placeholder_logo.png" alt="" />
    </el-row>
    <el-row type="flex" align="middle" justify="center" slot="placeholder" class="image-slot">
      <img src="@/assets/images/public/placeholder_logo.png" alt="" />
    </el-row>
  </el-image>
</template>

<script>
export default {
  props: ['src', 'fit', 'alt', 'lazy', 'previewSrcList', 'zIndex', 'width', 'height'],
  computed: {
    wrapStyle() {
      let style = {}
      style.width = this.width
      style.height = this.height
      return style
    }
  },
  methods: {
    // 点击图片
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss">
.image-slot {
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  img {
    max-width: 70px;
    width: 25%;
    min-width: 30px;
  }
}
</style>
